<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:focus-visible</title>
		<style>
			summary:focus {
				outline: #00CED1 1px solid;
			}
			div:focus-visible {
				outline: #00CED1 1px solid;
			}
		</style>
	</head>
	<body>
		<h2>focus-visible</h2>
		<h4>元素聚焦，而且<b style="color: red;">浏览器认为</b>应该显示</h4>
		<h4>目前仅chrome支持，以下三个场景和预期不符，点击依然有轮廓</h4>
		<dl>
			<dd>设置了背景的button</dd>
			<dd>HTML5的 summary</dd>
			<dd>设置了tabindex</dd>
		</dl>
		<h4>summary没用focus-visible，可以看出差别</h4>
		<details>
			<summary>这是一个summary</summary>
			我跳出来了，我又回来了
		</details>
		<div tabindex="0">一个可以聚焦的div</div>

	</body>
</html>
